<template>
	<view class="info-wrapper">
		<view class="" style="display:flex;justify-content: space-between;">
			<text class="info-title">套餐项目一览</text>
			<!-- <text style="font-size: 24rpx;" @click="ghostTap()">{{expanded_any?'一键关闭':'一键展开'}}</text> -->
		</view>
		<view v-for="(item, index) in currentPackage.items" :key="index" class="category-section">
			<view class="info-type" @click="toggleExpand(index)">
				<text class="type-title">{{ item.check_name }}</text>
				<view class="type-line"></view>
				<!-- <uni-icons :type="expandedItems[index] ? 'up' : 'down'" size="20" color="#FF7F36"></uni-icons> -->
			</view>

			<view v-if="expandedItems[index]" class="category-items">
				<view class="info-row">
					<text class="item-name">{{ item.check_items.join('、') }}：</text>
					<text class="item-desc">{{ item.clinical_significance }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const props = defineProps({
		currentPackage:{
			type:Object,
			default:{}
		},
		expandedItems: {
			type: Array,
			default:[],
		},
	});
	// 展开/收起状态
	const expanded_any = ref(false)
	const ghostTap = () => {
		for (let i = 0; i < props.expandedItems.length; i++) {
			props.expandedItems[i] = !expanded_any.value;
		}
		expanded_any.value = props.expandedItems.every(item => item === true)
	}
	// 切换项目展开状态
	const toggleExpand = (index) => {
		props.expandedItems[index] = !props.expandedItems[index];
		expanded_any.value = props.expandedItems.every(item => item === true)
	};
</script>

<style scoped lang="scss">
.info-wrapper {
            width: 100%;
            box-sizing: border-box;
            padding: 30rpx;
            display: flex;
            flex-direction: column;
            background-color: white;
            box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
            border-radius: 8rpx;

            .info-title {
                color: #333333;
                font-weight: 500;
                font-size: 32rpx;
                margin-bottom: 10rpx;
            }

            .info-type {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 10rpx;
                margin-bottom: 20rpx;

                .type-title {
                    color: #ff7f36;
                    font-weight: 400;
                    font-size: 26rpx;
                    flex-shrink: 0;
                }

                .type-line {
                    width: 446rpx;
                    height: 2rpx;
                    background-color: #ff7f36;
                    margin: 0 30rpx;
                }
            }

            .info-row {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                margin-bottom: 20rpx;

                .item-name {
                    color: #333333;
                    font-size: 26rpx;
                    font-weight: 400;
                    flex-shrink: 0;
                }

                .item-desc {
                    color: #B6B6B8;
                    font-weight: 400;
                    font-size: 26rpx;
                    flex: 1;
                }
            }

            .category-section {
                .category-items {
                    margin-top: 20rpx;
                }
            }
        }
</style>